const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const PreloadPlugin = require('@vue/preload-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const NamedChunksPlugin = require('webpack').NamedChunksPlugin
const HashedModuleIdsPlugin = require('webpack').HashedModuleIdsPlugin
const DefinePlugin = require('webpack').DefinePlugin
const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin')
const Merge = require('webpack-merge')
const base = require('./webpack.common')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const config = Merge(base, {
  mode: 'production',
  devtool: 'cheap-source-map',
  entry: {
    app: [
      // resolve('../public/flexible.js'),
      resolve('./src/main.js')
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/'
  },
  resolveLoader: {
    modules: [
      'node_modules'
    ]
  },
  optimization: {
    minimizer: [
    ],
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    }
  },
  plugins: [
    // vue-loader
    new VueLoaderPlugin(),
    new DefinePlugin(
      {
        'process.env': {
          BASE_URL: '"/"',
          NODE_ENV: '"development"',
        }
      }
    ),
    // case-sensitive-paths
    new CaseSensitivePathsPlugin(),
    // friendly-errors
    new FriendlyErrorsPlugin(),
    // extract-css
    new MiniCssExtractPlugin(
      {
        filename: 'css/[name].[contenthash:8].css',
        chunkFileName: 'css/[name].[contenthash:8].css'
      }
    ),
    // optimize-css
    new OptimizeCssnanoPlugin(
      {
        sourceMap: false,
        cssnanoOptions: {
          preset: [
            'default',
            {
              mergeLonghand: false,
              cssDeclarationSorter: false
            }
          ]
        }
      }
    ),
    // hash-module-ids
    new HashedModuleIdsPlugin(
      {
        hashDigest: 'hex'
      }
    ),
    // named-chunks
    new NamedChunksPlugin(),
    // html
    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        collapseBooleanAttributes: true,
        removeScriptTypeAttributes: true
      },
      template: resolve('./public/index.html')
    }),
    // preload
    new PreloadPlugin(
      {
        rel: 'preload',
        include: 'initial',
        fileBlacklist: [
          /\.map$/,
          /hot-update\.js$/
        ]
      }
    ),
    // prefetch
    new PreloadPlugin(
      {
        rel: 'prefetch',
        include: 'asyncChunks'
      }
    ),
    // copy
    new CopyWebpackPlugin(
      [
        {
          from: resolve('./public'),
          to: resolve('./dist'),
          toType: 'dir',
          ignore: [
            '.DS_Store'
          ]
        }
      ]
    )
  ],
  stats: {
    timings: true,
    errors: true
  }
})

module.exports = config
